<template>
	<view class="giftCard-content">
		<image class="line-bg"
			:src="active==0?'../../static/images/img_yhq@2x.png':'../../static/images/img_yhq_h.png'"></image>
		<view class="mes-view">
			<view class="mes-left">
				<text :class="active==0?'active':'default'" style="color: #6D7278;">¥{{datasource.face_value || 0}}</text>
				<view class="line-line"></view>
			</view>
			<view class="mes-right">
				<view class="row-center">
					<text class="name line1">{{datasource.card_name}}</text>
					<text class="type" v-if="!isShowSelect">{{datasource.card_status ==0?'未使用':datasource.card_status ==1?'已使用':'已过期'}}</text>
					<image v-if="isShowSelect" @click="selectCard()"
						:src="datasource.select?'../../static/images/check_s.png':'../../static/images/check_n.png'"
						style="width: 32upx;height: 32upx;"></image>
				</view>
				<text :class="active==0?'active':'deteDef'"
					style="font-size: 24upx;margin-top: 12upx;">卡号：{{datasource.card_sn}}</text>
				<text style="color: #666;font-size: 24upx;margin-top: 32upx;">有效期至{{datasource.expired_at}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			active: {
				type: String,
				default: '0'
			},
			isShowSelect: {
				type: Boolean,
				default: false
			},
			datasource: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			}
		},
		methods:{
			selectCard(e){
				this.$emit('giftChangeSelect');
			}
		}
	}
</script>

<style lang="scss">
	.giftCard-content {
		width: 710upx;
		margin: 0 auto 20upx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0px -4upx 28upx 0px rgba(0, 0, 0, 0.06);
		box-sizing: border-box;
		border-radius: 10upx;
		overflow: hidden;

		.line-bg {
			width: 710upx;
			height: 20upx;
		}

		.mes-view {
			width: 100%;
			height: 208upx;
			background-color: #fff;
			padding-right: 30upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.mes-left {
				width: 198upx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FA6400;
				font-size: 48upx;
				font-weight: 600;
				position: relative;

				.line-line {
					position: absolute;
					color: #DCDCDC;
					width: 1px;
					height: 180upx;
					right: 0;
					border-right-style: dotted;
				}

				// border-right-style: dotted;
			}

			.mes-right {
				display: flex;
				flex-direction: column;
				height: 100%;
				flex: 1;
				margin-left: 30upx;
				justify-content: center;

				.row-center {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// padding-right: 30upx;
					box-sizing: border-box;

					.name {
						color: #333333;
						font-size: 32upx;
						font-weight: 600;
					}

					.type {
						color: #FA6400;
						font-size: 28upx;
					}
				}
			}
		}
	}

	.active {
		color: #FA6400 !important;
	}

	.default {
		color: #6D7278 !important;
	}

	.deteDef {
		color: #666666 !important;
	}
</style>
